<template>
    <div class="navWrap">
        <li @click="handleHome">
            <img src="@/assets/home.svg" />

            <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
        </li>
        <li @click="handDashBoard" :class="store.$state.ActiveShow == 2 && 'active'">
            <img src="@/assets/menu.svg" />

            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
        </li>
        <li @click="handleIpo" :class="store.$state.ActiveShow == 3 && 'active'">
            <img src="@/assets/book.svg" />

            <span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
        </li>
    </div>
</template>

<script lang="ts">
export default {
    name: "XNav",
};
</script>

<script lang="ts" setup>

import i18n from '@/locales'
import { getCurrentInstance ,ref,} from 'vue'
import { ipoStore } from "@/stores/ipo"
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore()

const handleIpo = () => {
    store.setActiveShow(3)
    proxy.$router.push("/IPO")
}
const handleHome = () => {
    store.setActiveShow(1)
    proxy.$router.push("/home")
}
const handDashBoard = () => {
    store.setActiveShow(2)
    proxy.$router.push("/dashBoard")
}
</script>

<style lang="scss" scoped>
.navWrap {
    width: 280px;
    position: relative;

    > li {
        width: 100%;
        height: 56px;
        border-radius: 10px;
        margin-top: 10px;
        margin-left: -10px;
        background-color: #fff;
        font-size: 21px;
        display: flex;
        align-items: center;
        color: #2b4a60;
        cursor: pointer;
        img {
            margin-left: 12px;
            width: 30px;
            height: 30px;
        }

        span {
            font-weight: 700;
            margin-left: 13px;
        }
        &.active {
            background-color: #edf5ff;
        }
    }
    li:hover {
        // color: #4ca0fc;
        cursor: pointer;
        background-color: #edf5ff;
    }
}
</style>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .navWrap {
        width: calc(100vw / var(--screen) * 280);
        > li {
            width: 100%;
            height: calc(100vw / var(--screen) * 56);
            border-radius: calc(100vw / var(--screen) * 10);
            margin-top: calc(100vw / var(--screen) * 10);
            margin-left: calc(100vw / var(--screen) * -10);

            font-size: calc(100vw / var(--screen) * 21);

            img {
                margin-left: calc(100vw / var(--screen) * 12);
                width: calc(100vw / var(--screen) * 30);
                height: calc(100vw / var(--screen) * 30);
            }

            span {
                margin-left: calc(100vw / var(--screen) * 13);
            }
        }
    }
}
</style>